<template>
  <div class="member">
    <div class="base-info">
      <div class="user-info">
        <div class="avatar"></div>
        <div class="name-info">
          <div class="nickname">1734310_vaOg</div>
          <div class="status">您还不是会员</div>
        </div>
      </div>
      <div class="save">开通会员平均每年可省: ￥ 9500</div>
      <div class="price-area">
        <div class="price-box" :class="{ active: option == 0 }" @click="chooseOption(0)">
          <p>季度会员</p>
          <div>￥
            <i>{{ priceList[0] }}</i>
            <span>/季</span>
          </div>
          <p>合计￥{{ priceList[0] }}(青少年专属)</p>
        </div>
        <div class="price-box" :class="{ active: option == 1 }" @click="chooseOption(1)">
          <p>1年会员</p>
          <div>￥
            <i>{{ priceList[1] }}</i>
            <span>/年</span>
          </div>
          <p>合计￥{{ priceList[1] }}</p>
        </div>
        <div class="price-box" :class="{ active: option == 2 }" @click="chooseOption(2)">
          <p>3年会员</p>
          <div>￥
            <i>{{ priceList[2] / 3 }}</i>
            <span>/年</span>
          </div>
          <p>合计￥{{ priceList[2] }} (省￥ 216)</p>
          <div class="recommend-btn">推荐</div>
        </div>
      </div>
      <button class="payment">立即以{{ price }}元开通</button>
      <div class="agree">
        开通即视为同意
        <a href="###">《会员服务协议》</a>
      </div>
    </div>  
    <div class="member-only">
      <div class="title">会员专属权益</div>
      <div class="interest-list">
        <div class="interest">
          <div class="hover">
            <div class="hover-item">
              <img class="hover-img" src="@/views/my/image/teach_video_free.png">
              <span>会员专区的</span>
              <span style="color:#f93684;">742</span>
              <span>个课程，会员全都可以免费观看学习！课程总价若干万元，而且每月更新、持续增加。
也许学会某一课程，单独购买的单价就已远超会员费，绝对超值！</span>
                <div class="hover-link">
                  立刻前往会员专区
                </div>
                <div class="arrow"></div>
                <div class="arrow_shadow"></div>
            </div>
          </div>
          <div class="interest-item">
            <div class="icon">
              <img src="@/views/my/image/teach_video_free.png">
            </div>
            <div class="desc">
              <p><span>742</span>个会员专区</p>
              <p>课程免费学习</p>
            </div>
          </div>
        </div>

        <div class="interest">
          <div class="hover">
            <div class="hover-item">
              <img class="hover-img" src="@/views/my/image/member_preferential.png">
              <span>会员购买<span style="font-weight: bold;">非会员专区</span>标有会员“立减”金额的视频课、直播课、线下课等商品服务，可获会员专属立减优惠！
会员优惠很省钱... 几十... 几千... 买的越多，省的越多！</span>
               
                <div class="arrow"></div>
                <div class="arrow_shadow"></div>
            </div>
          </div>
          <div class="interest-item">
            <div class="icon">
              <img src="@/views/my/image/member_preferential.png">
            </div>
            <div class="desc">
              <p>非会员专区课程</p>
              <p>可获会员立减优惠</p>
            </div>
          </div>
        </div>

        <div class="interest">
          <div class="hover">
            <div class="hover-item">
              <img class="hover-img" src="@/views/my/image/member_screen@2x.png">
              <span>会员使用同屏对比功能，将自己跳的动作与原跳视频画面进行每一节拍、每一时刻的对比学习。</span>
              <br>
              <span>同屏对比，精确又直观，让会员学习效果最大化！</span>
                <div class="hover-link">
                  查看使用说明文档
                </div>
                <div class="arrow"></div>
                <div class="arrow_shadow"></div>
            </div>
          </div>
          <div class="interest-item">
            <div class="icon">
              <img src="@/views/my/image/member_screen@2x.png">
            </div>
            <div class="desc">
              <p>同屏对比</p>
              <p>功能</p>
            </div>
          </div>
        </div>

        <div class="interest">
          <div class="hover">
            <div class="hover-item">
              <img class="hover-img" src="@/views/my/image/update_music@3x.png">
              <span>会员可一键从任何视频中提取音频/音乐（视频课需已设置允许提取）、自动保存在音频库，并可分享导出或导入！</span>
              <br>
              <span>将手机相册里的视频添加到练习室，同样可以音频提取。</span>
                <div class="hover-link">
                  查看使用说明文档
                </div>
                <div class="arrow"></div>
                <div class="arrow_shadow"></div>
            </div>
          </div>
          <div class="interest-item">
            <div class="icon">
              <img src="@/views/my/image/update_music@3x.png">
            </div>
            <div class="desc">
              <p>音频提取</p>
              <p>功能</p>
            </div>
          </div>
        </div>

        <div class="interest">
          <div class="hover">
            <div class="hover-item">
              <img class="hover-img" src="@/views/my/image/music_clip@3x.png">
              <span>会员可对音频库的音频/音乐进行任意剪辑或合并，并可分享导出或导入！</span>
              <br>
              <span>会员可对音频库的音频/音乐进行任意剪辑或合并，并可分享导出或导入！</span>
                <div class="hover-link">
                  查看使用说明文档
                </div>
                <div class="arrow"></div>
                <div class="arrow_shadow"></div>
            </div>
          </div>
          <div class="interest-item">
            <div class="icon">
              <img src="@/views/my/image/music_clip@3x.png">
            </div>
            <div class="desc">
              <p>音频剪辑</p>
              <p>功能</p>
            </div>
          </div>
        </div>

        <div class="interest">
          <div class="hover">
            <div class="hover-item">
              <img class="hover-img" src="@/views/my/image/member_icon_beat.png">
              <span>通过设置节拍口令，会员能把想学的任何作品视频自动变成口令教程，就像老师一样数节拍口令教学！</span>
              <br>
              <span>节拍口令，让会员总能快人一步、抢先学新舞！</span>
                <div class="hover-link">
                  查看使用说明文档
                </div>
                <div class="arrow"></div>
                <div class="arrow_shadow"></div>
            </div>
          </div>
          <div class="interest-item">
            <div class="icon">
              <img src="@/views/my/image/member_icon_beat.png">
            </div>
            <div class="desc">
              <p>节拍口令</p>
              <p>功能</p>
            </div>
          </div>
        </div>

        <div class="interest">
          <div class="hover">
            <div class="hover-item">
              <img class="hover-img" src="@/views/my/image/member_photo_download1@3x.png">
              <span>将缓存的资源视频（不含视频课、直播课等课程的视频），保存到手机本地相册</span>
                <div class="arrow"></div>
                <div class="arrow_shadow"></div>
            </div>
          </div>
          <div class="interest-item">
            <div class="icon">
              <img src="@/views/my/image/member_photo_download1@3x.png">
            </div>
            <div class="desc">
              <p>保存视频到</p>
              <p>手机本地相册</p>
            </div>
          </div>
        </div>

        <div class="interest">
          <div class="hover">
            <div class="hover-item">
              <img class="hover-img" src="@/views/my/image/lv_ad@3x.png">
              <span>会员有效期内，自动跳过视频播放页的广告。</span>
                <div class="arrow"></div>
                <div class="arrow_shadow"></div>
            </div>
          </div>
          <div class="interest-item">
            <div class="icon">
              <img src="@/views/my/image/lv_ad@3x.png">
            </div>
            <div class="desc">
              <p>免广告特权</p>
             
            </div>
          </div>
        </div>

        <div class="interest">
          <div class="hover">
            <div class="hover-item">
              <img class="hover-img" src="@/views/my/image/lv_accelerate.png">
              <span>开通年费会员后，可获得相当于10倍会员费的成长值。会员有效期内可获得1.5倍成长值加速特权。</span>
                <div class="arrow"></div>
                <div class="arrow_shadow"></div>
            </div>
          </div>
          <div class="interest-item">
            <div class="icon">
              <img src="@/views/my/image/lv_accelerate.png">
            </div>
            <div class="desc">
              <p>成长等级</p>
              <p>加速特权</p>
             
            </div>
          </div>
        </div>

        <div class="interest">
          <div class="hover">
            <div class="hover-item">
              <img class="hover-img" src="@/views/my/image/course_equity.png">
              <span>会员学习成长过程中的困惑、问题和所需资源，平台将优先更大力度提供帮助。</span>
                <div class="arrow"></div>
                <div class="arrow_shadow"></div>
            </div>
          </div>
          <div class="interest-item">
            <div class="icon">
              <img src="@/views/my/image/course_equity.png">
            </div>
            <div class="desc">
              <p>会员学习</p>
              <p>成长优先帮扶</p>
             
            </div>
          </div>
        </div>

        <div class="interest">
          <div class="hover">
            <div class="hover-item">
              <img class="hover-img" src="@/views/my/image/member_logo.png">
              <span>所有用户都将会看到您的会员闪耀标识，彰显您的尊贵身份，让您更加出众耀眼！</span>
                <div class="arrow"></div>
                <div class="arrow_shadow"></div>
            </div>
          </div>
          <div class="interest-item">
            <div class="icon">
              <img src="@/views/my/image/member_logo.png">
            </div>
            <div class="desc">
              <p>会员专享</p>
              <p>身份标识</p>
             
            </div>
          </div>
        </div>

        <div class="interest">
          <div class="hover">
            <div class="hover-item">
              <img class="hover-img" src="@/views/my/image/update_equity.png">
              <span>会员有效期内，您有权享受新增加的相应会员等级的会员权益和会员功能。</span>
                <div class="arrow"></div>
                <div class="arrow_shadow"></div>
            </div>
          </div>
          <div class="interest-item">
            <div class="icon">
              <img src="@/views/my/image/update_equity.png">
            </div>
            <div class="desc">
              <p>享受新增</p>
              <p>权益和功能</p>
             
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const option = ref(2)
const priceList = ref([98, 268, 588])
const price = ref(priceList.value[2])
const chooseOption = (num: number) => {
  option.value = num
  price.value = priceList.value[num]
}
</script>

<style lang="less" scoped>
.member {
  width: 100%;
  padding: 30px;
  padding-bottom: 0px ;
  background: #fff;

  .base-info {
    width: 100%;
    padding-bottom: 37px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid #e3e3e3;

    .user-info {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;

      .avatar {
        width: 100px;
        height: 100px;
        background-image: url('../../../../image/12.png');
        background-size: 100px;
        border-radius: 50%;
      }

      .name-info {
        margin-left: 21px;
        
        .nickname {
          text-align: center;
          font-size: 20px;
  

        }

        .status {
          color: #f93684;
          margin-top: 14px;
          // margin-right: 120px;
          font-size: 14px;
         
        }
      }
    }

    .save {
      font-size: 16px;
      margin-top: 19px;
      text-align: center;
    }

    .price-area {
      width: 720px;
      height: 154px;
      margin: 21px 120px 0;
      display: flex;
      justify-content: space-between;

      .price-box {
        width: 220px;
        height: 124px;
        margin-top: 30px;
        border: 1px solid #b1b5c1;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        box-sizing: border-box;
        position: relative;

        &.active {
          border: 2px solid #f93684;
          background: #f9ebf1;
          color: #f93684;
        }

        p {
          height: 20px;
          text-align: center;
          font-size: 16px;
        }

        &>div {
          text-align: center;

          i {
            font-size: 30px;
          }
        }

        .recommend-btn {
          width: 76px;
          height: 36px;
          line-height: 36px;
          border-radius: 20px;
          background: linear-gradient(-56deg, #ff638f, #ff4683);
          box-shadow: 2px 2px #fff;
          color: #fff;
          position: absolute;
          right: -20px;
          top: -10px;
        }
      }
    }

    .payment {
      width: 330px;
      height: 56px;
      margin: 30px 0 12px;
      padding: 9px 15px;
      background: linear-gradient(-56deg, #ff4683, #ff638f);
      border-radius: 10px;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
      border: none;
    }

    .agree {
      font-size: 14px;

      a {
        color: #f93684;
      }
    }
  }

  .member-only {
    padding-bottom: 15px;
    border-bottom: 1px solid #e3e3e3;
   
    .title {
      margin-top: 32px;
      font-size: 20px;
      font-weight: bold;
    }

    .interest-list {
      margin: 20px 0 5px;
      padding-left: 19px;
      display: flex;
      flex-wrap: wrap;
    
     .interest {
        position: relative;
        &:hover{
          .hover{
            display: block;
          }
        }
        .hover {
          padding-bottom: 5px;
          display: none;
          position: absolute;
          left: -40%;
          bottom: 160px;
          width: 260px;
          // height: 200px;
          box-sizing: border-box;
          background: rgb(255, 255, 255);
          border-radius: 15px;
       
          .hover-item  {
            position: relative;
            padding: 18px 20px;
            border: 2px solid rgba(249,83,138,.5);
            min-height: 310px;
            border-radius: 15px;
           
            .hover-img {
              display: block;
              width: 60px;
              height: 60px;
              border: 1px solid #ffc6d3;
              padding: 10px;
              border-radius: 30px;
              text-align: center;
              margin: 0 auto 10px;
              background-repeat: no-repeat;
            }
            >span {
              text-align: center;
              margin-top: 15px;
              font-size: 14px;
              color: #333;
              line-height: 24px;
            }
            .hover-link {
              margin: 25px auto 20px;
              line-height: 36px;
              border-radius: 6px;
              color: #fff;
              font-size: 16px;
              height: 36px;
              width: 80%;
              background: #f9538a;
              text-align: center;
              cursor: pointer;
            }
            .arrow{
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              bottom: -10px;
              border-style: solid;
              border-width: 8px 8px 0;
              border-color: rgba(249,83,138,.5);
              border-left-color: transparent;
              border-right-color: transparent;
            }
            .arrow_shadow{
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              bottom: -7px;
              border-style: solid;
              border-width: 8px 8px 0;
              border-color: #fff transparent transparent;
              
            }
          }
        }
     }

      .interest-item  {
        width: 129px;
        height: 129px;
        border: 1px solid #e3e3e3;
        border-radius: 8px;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        margin: 0 27px 30px 0;
        &:nth-child(6n) {
          margin-right: 0;
        }

      
        .icon {
          width: 46px;
          height: 42px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .desc {
          width: 100%;
          text-align: center;
          height: 40px;

          p {
           margin-top: -2px;
            span {
              color: #f93684;
            }
          }
        }
      }
    }
  }
}
</style>